﻿<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <div class="caption-subject font-green-haze bold">
                表格 和 分页条
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <div class="row col-xs-12">
            <div class="table-scrollable table-scrollable-borderless">
                <table class="table table-hover table-light col-xs-12">
                    <thead>
                        <tr class="active">
                            <th>#</th>
                            <th>Column heading</th>
                            <th>Column heading</th>
                            <th>Column heading</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="info">
                            <td>3</td>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="success">
                            <td>4</td>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="danger">
                            <td>5</td>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="warning">
                            <td>6</td>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                        <tr class="active">
                            <td>7</td>
                            <td>Column content</td>
                            <td>Column content</td>
                            <td>Column content</td>
                        </tr>
                    </tbody>
                </table>
            </div> 
        </div>
        <div class="col-xs-12">
            <div class="pager">
                <div class="btn-group-sm pull-left">
                    <button class="btn btn-raised" ng-disabled="pager.isFirst()">
                        <i class="fa fa-step-backward"></i>
                    </button>
                    <button class="btn btn-raised" ng-disabled="pager.isFirst()">
                        <i class="fa fa-caret-left"></i>
                    </button>
                    <input class="form-control" type="text" ng-model="pager.page" ng-change="pageChange()" />
                    <span>
                        / {{pager.pages}}
                    </span>
                    <button class="btn btn-raised" ng-disabled="pager.isLast()">
                        <i class="fa fa-caret-right"></i>
                    </button>
                    <button class="btn btn-raised" ng-disabled="pager.isLast()">
                        <i class="fa fa-step-forward"></i>
                    </button>
                    <select class="form-control" name="pgSize" ng-model="pager.limit" ng-change="pageSizeChange()" ng-options="pgSize as pgSize for pgSize in pageSizeList"></select>
                    <span>行每页</span>
                </div>

                <div class="pull-right">
                    <span>
                        {{pager.range.start}} - {{pager.range.end}}  共 {{pager.total}} 行
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>